<template>
  <div class="body">
    <div class="header">
      <div class="title">原平收费站</div>
      <div class="shadow">原平收费站</div>
      <div class="weather">多云转晴&nbsp;&nbsp;&nbsp;10℃ ~ 12℃</div>
      <div class="date"> {{moment().format('YYYY年MM月DD日')}}&nbsp;&nbsp;&nbsp;{{chineseWeekday}}&nbsp;&nbsp;&nbsp;{{moment().format('hh:mm')}}<div
          class="signout" @click="bindExit"></div>
      </div>
    </div>
    <div class="bg-left"></div>
    <div class="bg-right"></div>
    <div class="info">
      <div class="info-item">
        <img class="info-img" src="../../../assets/images/icon2.png" alt="">
        <div>
          <div class="info-num">2</div>
          <div class="info-text">完成率排名</div>
        </div>
      </div>
      <div class="info-item">
        <img class="info-img" src="../../../assets/images/icon3.png" alt="">
        <div>
          <div class="info-num">468,123.00</div>
          <div class="info-text">年度收费目标(万元)</div>
        </div>
      </div>
      <div class="info-item">
        <img class="info-img" src="../../../assets/images/icon4.png" alt="">
        <div>
          <!-- <el-statistic class="info-num"  :value="outputValue" /> -->
          <div class="info-num">{{numberToCurrencyNo(62378.00,2)}}</div>
          <div class="info-text">完成值(万元)</div>
        </div>
      </div>
      <div class="info-item">
        <img class="info-img" src="../../../assets/images/icon5.png" alt="">
        <div>
          <div class="info-num">15.32</div>
          <div class="info-text">完成率(%)</div>
        </div>
      </div>

    </div>
    <!-- <div class="center-video" ref="myElementBox"> -->
      <!-- <video :src="videoSrc" autoplay loop muted></video> -->
      <!-- <el-carousel class="center-bg" :height="carouselHeight" indicator-position="none">
        <el-carousel-item v-for="item in banner" :key="item">
          <img :src="item" alt="">
        </el-carousel-item>
      </el-carousel> -->
    <!-- </div> -->

    <div class="gate-left">
      <div class="left-top">
        <div class="gate-title">
          <div class="text">收费站基本信息</div>
        </div>
        <!--  -->
        <div class="top-video" id="id_video" ref="myElement"> <video :src="VideoUrl" controls v-if="VideoUrl"></video> </div>
        <div class="top-text">原平收费站立于1998年，是全省建站最早的高速公路女子收费站。原平收费站立于1998年，是全省建站最早的高速公路女子收费...&nbsp;&nbsp;&nbsp;<span class="more">查看更多</span> </div>
        <!-- <div class="top-staff">
          <div class="staff-item">
            <span class="">站长</span>
            <span class="staff">张三</span>
          </div>
          <div class="staff-item">
            <span class="">副站长</span>
            <span class="staff">王新宇 李四 王五</span>
          </div>
        </div> -->
        <div class="top-statistics">
          <div class="statistics-item">
            <div class="statistics-num">12</div>
            <div>总人数(人)</div>
          </div>
          <div class="statistics-item">
            <div class="statistics-num">12</div>
            <div>在岗人数(人)</div>
          </div>
          <div class="statistics-item">
            <div class="statistics-num">王宇新</div>
            <div>值班站长</div>
          </div>
        </div>
      </div>
      <div class="left-center">
        <div class="gate-title">
          <div class="text">今日车道配置及状况</div>
        </div>
        <div class="lane">
          <div class="lane-item">
            <div class="lane-title"><img src="../../../assets/images/icon10.png" alt="">车道数</div>
            <div class="lane-opt">
              <span>入口</span>
              <span class="opt-num"><span class="text-white">2</span></span>
            </div>
            <div class="lane-opt">
              <span>出口</span>
              <span class="opt-num"><span class="text-white">2</span></span>
            </div>
          </div>

          <div class="lane-item">
            <div class="lane-title"><img src="../../../assets/images/icon11.png" alt="">今日开放车道</div>
            <div class="lane-opt">
              <span>入口</span>
              <span class="opt-num">2</span>
            </div>
            <div class="lane-opt">
              <span>出口</span>
              <span class="opt-num">2</span>
            </div>
          </div>

          <div class="lane-item">
            <div class="lane-title"><img src="../../../assets/images/icon12.png" alt="">今日开放人工车道</div>
            <div class="lane-opt">
              <span>入口</span>
              <span class="opt-num">2</span>
            </div>
            <div class="lane-opt">
              <span>出口</span>
              <span class="opt-num">2</span>
            </div>
          </div>
        </div>
      </div>
      <div class="footer-item">
        <!-- <div class="gate-title">
          <div class="text">本月工作亮点</div>
        </div> -->
        <div class="flex-title ">
          <div class="gate-title">
            <div class="text">本月工作亮点</div>
          </div>
          <div class="tab">
            <div :class="dateTab==1?'active':''" @click="bindChangeDate(1)">本站</div>
            <div :class="dateTab==2?'active':''" @click="bindChangeDate(2)">全部</div>
          </div>
        </div>
        <div class="light" v-scrollList="2000">
          <div class="light-item" v-for="item in 4" :key="item">
            <img class="light-img" src="../../../assets/images/banner1.png" alt="">
            <div>
              <div class="light-title">
                A10栋二单元10楼左侧消防器材发生报左左侧消防器材发生报侧消防器材发生报...
              </div>
              <div class="light-date">2020-12-25 06:12</div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="left-bottom">
        <div class="gate-title margin-bottom">
          <div class="text">现金通行介质使用情况</div>
        </div>

        <div class="table cursor">
          <div class="table-header">
            <div class="text-center" :style="{ flex: item.width }" v-for="(item, index) in columns" :key="index">
              {{ item.title }}
            </div>
          </div>
          <div class="table-body">
            <swiper :direction="'vertical'" :slidesPerView="3" :modules="modules" :autoplay="{
              delay: 2500,
              disableOnInteraction: false,
            }" style="height:8.25rem">
              <swiper-slide class="table-th" v-for="(row,i) in dataSource" :key="row.title" @click="bindChangeStatus(2,row)">
                <div class="tr">
                  <div class="td" :class="index==0?'serial': ''" :style="{ flex: col.width }" v-for="(col, index) in columns" :key="index">
                    {{ col.key=='serial'?(i+1):row[col.key] }}
                  </div>
                </div>

              </swiper-slide>
            </swiper>
          </div>
        </div>

      </div> -->
    </div>

    <div class="gate-right">
      <div class="right-top">
        <div class="gate-title">
          <div class="text">通行费量情况</div>
        </div>
        <div class="flex fee">
          <div class="flex-item">
            <div class="fee-top">
              <img src="../../../assets/images/icon20.png" alt="">
              <div>
                <div class="fee-title">昨日通行费(万元)</div>
                <div class="fee-num">89,452.36</div>
              </div>
            </div>
            <div class="fee-bottom">
              同比 <span class="red">3.7%</span>
              环比 <span class="green">1.7%</span>
            </div>
          </div>
          <div class="flex-item">
            <div class="fee-top">
              <img src="../../../assets/images/icon23.png" alt="">
              <div>
                <div class="fee-title">昨日通行量(万辆)</div>
                <div class="fee-num">89,452.36</div>
              </div>
            </div>
            <div class="fee-bottom">
              同比 <span class="red">3.7%</span>
              环比 <span class="green">1.7%</span>
            </div>
          </div>
        </div>

        <div class="trend">
          <div class="flex ">
            <div class="trend-title">通行费量变化趋势</div>
            <div class="tab">
              <div :class="dateTab==1?'active':''" @click="bindChangeDate(1)">本月</div>
              <div :class="dateTab==2?'active':''" @click="bindChangeDate(2)">本季</div>
              <div :class="dateTab==3?'active':''" @click="bindChangeDate(3)">本年</div>
            </div>
          </div>
          <div>
            <LineEchert v-if="echartsData" :echartsData="echartsData" />
          </div>

        </div>

        <div class="over">
          <div class="trend-title">绿通减免情况</div>
          <div class="flex">
            <div class="flex-item">
              <div class="over-num">{{numberToCurrencyNo(1519)}}</div>
              <div class="over-title">昨日绿通通行费(万元)</div>
            </div>
            <div class="flex-item">
              <div class="over-num">{{numberToCurrencyNo(1519)}}</div>
              <div class="over-title">昨日绿通减免金额(万元)</div>
            </div>
          </div>
        </div>

      </div>

      <div class="right-center">
        <div class="gate-title">
          <div class="text">昨日稽核情况</div>
        </div>
        <div class="flex check">
          <div class="flex-item">
            <img src="../../../assets//images/icon26.png" alt="">
          </div>
          <div class="flex-item">
            <div class="check-num">{{numberToCurrencyNo(2125)}}</div>
            <div class="check-title">总工单量</div>
          </div>
          <div class="flex-item">
            <div class="check-num">{{numberToCurrencyNo(2125)}}</div>
            <div class="check-title">完成量</div>
          </div>
          <div class="flex-item">
            <div class="check-num">82.5 <span>%</span></div>
            <div class="check-title">完成率</div>
          </div>
        </div>

        <div class="flex chase">
          <div class="flex-item">
            <div class="chase-num">263</div>
            <div class="chase-title">违规车辆数</div>
          </div>
          <div class="flex-item">
            <div class="chase-num">{{numberToCurrencyNo(2125.00)}}</div>
            <div class="chase-title">追缴金额</div>
          </div>
          <div class="flex-item">
            <div class="chase-num">1</div>
            <div class="chase-title">加入黑名单</div>
          </div>
          <div class="flex-item">
            <div class="chase-num">1</div>
            <div class="chase-title">转入省级追缴</div>
          </div>
        </div>

      </div>

      <div class="right-bottom">
        <div class="gate-title">
          <div class="text">昨日超限检测情况</div>
        </div>

        <div class="limit">
          <div class="flex">
            <div class="flex-item">
              <div class="limit-num">{{numberToCurrencyNo(2125)}}</div>
              <div>检测车辆总数</div>
            </div>
            <div class="flex-item">
              <div class="limit-num">125</div>
              <div>检测超限车辆</div>
            </div>
            <div class="flex-item">
              <div class="limit-num">{{numberToCurrencyNo(2125)}}</div>
              <div>检测大件运输车次</div>
            </div>
          </div>

          <!-- <div class="flex">
            <div class="flex-item">
              <div class="limit-num">{{numberToCurrencyNo(2125)}}</div>
              <div>检测超限车辆最大载重</div>
            </div>
            <div class="flex-item">
              <div class="limit-num">{{numberToCurrencyNo(2125)}}</div>
              <div>检测大件运输车次</div>
            </div>
          </div> -->
        </div>
      </div>

    </div>

    <div class="gate-footer">
      <div class="footer-item">
        <div class="gate-title">
          <div class="text">工作提示</div>
        </div>
        <!-- <div class="list" v-scrollList="2000">
          <div class="flex" v-for="item in 8" :key="item">
            <div class="list-title">A10栋二单元10楼左侧消防器材发生报...</div>
            <div class="list-date">2020-12-25 06:12 {{item}}</div>
          </div>
        </div> -->

        <div class="table cursor">
          <div class="table-header">
            <div class="text-center" :style="{ flex: item.width }" v-for="(item, index) in columns" :key="index">
              {{ item.title }}
            </div>
          </div>
          <div class="table-body">
            <swiper :direction="'vertical'" :slidesPerView="3" :modules="modules" :autoplay="{
              delay: 2500,
              disableOnInteraction: false,
            }" style="height:8.25rem">
              <swiper-slide class="table-th" v-for="(row,i) in dataSource" :key="row.title" @click="bindChangeStatus(2,row)">
                <div class="tr">
                  <div class="td" :class="index==0?'serial': ''" :style="{ flex: col.width }" v-for="(col, index) in columns" :key="index">
                    {{ col.key=='serial'?(i+1):row[col.key] }}
                  </div>
                </div>

              </swiper-slide>
            </swiper>
          </div>
        </div>

      </div>
      <!-- <div class="left-bottom">
        <div class="gate-title margin-bottom">
          <div class="text">现金通行介质使用情况</div>
        </div>

        <div class="table cursor">
          <div class="table-header">
            <div class="text-center" :style="{ flex: item.width }" v-for="(item, index) in columns" :key="index">
              {{ item.title }}
            </div>
          </div>
          <div class="table-body">
            <swiper :direction="'vertical'" :slidesPerView="3" :modules="modules" :autoplay="{
              delay: 2500,
              disableOnInteraction: false,
            }" style="height:8.25rem">
              <swiper-slide class="table-th" v-for="(row,i) in dataSource" :key="row.title" @click="bindChangeStatus(2,row)">
                <div class="tr">
                  <div class="td" :class="index==0?'serial': ''" :style="{ flex: col.width }" v-for="(col, index) in columns" :key="index">
                    {{ col.key=='serial'?(i+1):row[col.key] }}
                  </div>
                </div>

              </swiper-slide>
            </swiper>
          </div>
        </div>

      </div> -->

      <!-- <div class="footer-item">
        <div class="gate-title">
          <div class="text">本月工作亮点</div>
        </div>
        <div class="light" v-scrollList="2000">
          <div class="light-item" v-for="item in 4" :key="item">
            <img class="light-img" src="../../../assets/images/login-background.png" alt="">
            <div>
              <div class="light-title">
                A10栋二单元10楼左侧消防器材发生报左左侧消防器材发生报侧消防器材发生报...
              </div>
              <div class="light-date">2020-12-25 06:12</div>
            </div>
          </div>
        </div>
      </div> -->

    </div>

    <div class="bottom"></div>

  </div>

</template>

<script setup>
import '../../../utils/rem.js'
import moment from 'moment'
import LineEchert from "../components/lineEchert.vue";
import { useTransition } from '@vueuse/core'
import { Autoplay } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import videoSrc from '@/assets/videonew/bg.mp4'

import { getVideoUrl } from '@/api/charge/gate'
import useUserStore from '@/store/modules/user'

const getAssetsFile = (url) => {
  return new URL(`../../../assets/images/${url}`, import.meta.url).href;
};

const router = useRouter();
const userStore = useUserStore()
let modules = [Autoplay];
// ,getAssetsFile('banner2.jpg'),getAssetsFile('banner3.jpg')
const banner = [getAssetsFile('banner1.png')]
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
const chineseWeekday = weekdays[moment().format('d')];
const echartsData = ref({ series: [{ data1: [10, 10, 30, 12, 15, 3], data2: [5, 12, 11, 14, 25, 16] }] })
const scrollFlag = ref(true)
const list = ref([{}, {}, {}, {}, {}, {}, {}, {}])
const columns = ref([
  {
    title: "序号",
    dataIndex: "serial",
    key: "serial",
    width: 0.8,
  },
  {
    title: "类型",
    dataIndex: "locationName",
    key: "locationName",
    width: 2,
  },
  {
    title: "内容",
    dataIndex: "deviceName",
    key: "deviceName",
    width: 2,
  },
  {
    title: "状态",
    dataIndex: "serialNumber",
    key: "serialNumber",
    width: 1.5,
  },
]);
const dataSource = ref([
  {
    serial: "1",
    locationName: "CPC卡",
    deviceName: "100",
    serialNumber: "200",
    status: "20",
  },
  {
    serial: "2",
    locationName: "微机票",
    deviceName: "100",
    serialNumber: "200",
    status: "20",
  },
  {
    serial: "3",
    locationName: "节假日纸券",
    deviceName: "100",
    serialNumber: "200",
    status: "20",
  },
  {
    serial: "4",
    locationName: "CPC卡",
    deviceName: "100",
    serialNumber: "200",
    status: "20",
  },
  {
    serial: "5",
    locationName: "微机票",
    deviceName: "100",
    serialNumber: "200",
    status: "20",
  },
  {
    serial: "6",
    locationName: "节假日纸券",
    deviceName: "100",
    serialNumber: "200",
    status: "20",
  },
]);
const dateTab = ref(1)
const gateScale = ref(1)
const deptId = ref()
const myElement = ref(null);
const VideoUrl = ref()
const carouselHeight = ref()
const myElementBox = ref(null);

// 统计值特效
const source = ref(0)
const outputValue = useTransition(source, {
  duration: 500,
})
source.value = 89, 452.36

const getDeptId = () => {
  userStore.getInfo().then(res => {
    if (res.code == 200) {
      deptId.value = res.user.dept.deptId;
      getList()
    }

  })
}
const getList = () => {
  getVideoUrl({ id: deptId.value }).then(res => {
    if (res.code == 200 && res.data && res.data.VideoUrl) {
      // VideoUrl.value = res.data.VideoUrl;
      var player = new TcPlayer('id_video', {
        "m3u8": res.data.VideoUrl,
        "autoplay": true,
        "width": myElement.value.getBoundingClientRect().width,
        "height": myElement.value.getBoundingClientRect().height,
      });
    } else {
      VideoUrl.value = videoSrc
    }
  }).catch(err => {
    VideoUrl.value = videoSrc
  })
}

const init = () => {

  getDeptId()

}

const bindChangeDate = (val) => {
  dateTab.value = val;
}
const bindExit = () => {
  router.push("/")
}

const numberToCurrencyNo = (value, num) => {
  if (!value) return 0
  // 获取整数部分
  const intPart = Math.trunc(value)
  // 整数部分处理，增加,
  const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
  // 预定义小数部分
  let floatPart = ''
  // 将数值截取为小数部分和整数部分
  const valueArray = value.toString().split('.')
  if (valueArray.length === 2) { // 有小数部分
    floatPart = valueArray[1].toString() // 取得小数部分
    return intPartFormat + '.' + floatPart
  }
  let newNumber = intPartFormat + floatPart
  return num ? newNumber + '.00' : newNumber
}
init()

onMounted(() => {
  // carouselHeight.value = myElementBox.value.offsetHeight * 0.85 + 'px'

});
// 监听画面变化
window.addEventListener("resize", () => {

});
</script>

<style scoped lang="scss">
.body {
  height: calc(100vw * 0.56);
  background-color: #0A45A6;
  position: relative;
  overflow: hidden;
  transform-origin: left top;
  transform: scale(1);
  background: url(../../../assets/images/banner1.png) no-repeat 0 0;
  background-size: 100% auto;
}
.header {
  width: 100vw;
  height: 6.25rem;
  background: url(../../../assets/images/header.png) no-repeat 0 0;
  background-size: 100% 100%;
  position: relative;

  .title {
    letter-spacing: 0.2rem;
    font-family: "CustomFont";
    font-size: 3rem;
    text-align: center;
    background-image: linear-gradient(
      to top,
      #8DEFEC 0%,
      #F6FFF4 62%,
      #ffffff 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }

  .shadow {
    color: #084205;
    letter-spacing: 0.2rem;
    font-family: "CustomFont";
    font-size: 3rem;
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    z-index: 0;
    text-shadow: 5px 0px 10px #17498B;
  }
  .weather {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: #fff;
    position: absolute;
    left: 2rem;
    bottom: 1.5rem;
  }
  .date {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: #fff;
    position: absolute;
    right: 2rem;
    bottom: 1.25rem;

    .signout {
      width: 2rem;
      height: 2rem;
      background: url(../../../assets/images/icon1.png) no-repeat 0 0;
      background-size: 100% auto;
      margin-left: 1.75rem;
    }
  }
}
.bg-left {
  width: 1.375rem;
  height: 59.9375rem;
  position: fixed;
  left: 0;
  top: 6.25rem;
  background: url(../../../assets/images/left.png) no-repeat 0 0;
  background-size: 100% auto;
}
.bg-right {
  width: 1.375rem;
  height: 59.9375rem;
  position: fixed;
  right: 0;
  top: 6.25rem;
  background: url(../../../assets/images/right.png) no-repeat 0 0;
  background-size: 100% auto;
}

.info {
  position: fixed;
  top: 9.375rem;
  left: 48%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  z-index: 1;

  .info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .info-img {
      width: 3.4375rem;
      height: 3.4375rem;
      margin: 1.25rem 0.625rem 0;
    }
    .info-num {
      font-family: "CustomFont";
      font-size: 1.875rem;
      color: #fff;
      text-shadow: 2px 0px 13px #fff;
      line-height: 1;
    }
    .info-text {
      font-family: Microsoft YaHei;
      color: #ccefec;
      font-size: 1rem;
    }
  }
}
.center-video {
  width: 100vw;
  height: calc(100vw * 0.46);
  video {
    width: 100%;
    height: 100%;
  }
  .center-bg {
    // width: 100vw;
    // height: calc(100vw * 0.56);
    // text-align: center;
   
    // position: relative;
    // // &::after {
    // //     /* 【主要代码】 */
    // //     position: absolute;
    // //     content: '';
    // //     width: 77%;
    // //     height: 86%;
    // //     top: 0;
    // //     left: 50%;
    // //     transform: translateX(-50%);
    // //     border-radius: 100px; /* 避免四个角没有阴影 */
    // //     box-shadow: 0 0 7.75rem 13rem #132126 inset; /* 【主要代码】 */
    // //   }
    // img {
    //   height: 100%;
    //   // border-radius: 100px;
    // }
  }
  .el-carousel__container {
    height: 100% !important;
  }
}
.gate-left {
  position: fixed;
  left: 1.875rem;
  top: 6.25rem;
  z-index: 1;
}
.gate-title {
  width: 28.0625rem;
  height: 2.6875rem;
  color: #fff;
  background: url(../../../assets/images/icon6.png) no-repeat 0 0;
  background-size: 100% 100%;
  padding-left: 2.25rem;
  .text {
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 600;
    line-height: 2.1rem;
    background-image: linear-gradient(
      to top,
      #00635b 0%,
      #f6fff4 62%,
      #ffffff 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.gate-left {
  .left-top {
    margin-bottom: 0.625rem;
    .top-video {
      width: 24.75rem;
      height: 16.5rem;
      border-radius: 4px;
      border: 2px solid #98EDFF;
      overflow: hidden;
      margin: 0.3125rem 1.875rem 0.5rem;
      video {
        width: 100%;
        height: 100%;
      }
    }
    .top-text {
      width: 28rem;
      font-size: 0.8125rem;
      color: #ccefeb;
      padding-left: 1.25rem;
      line-height: 1.4;
      .more {
        color: #98EDFF;
      }
    }
    .top-staff {
      width: 27rem;
      display: flex;
      align-items: center;
      padding-left: 1.25rem;
      margin: 0.625rem 0 0.375rem;
      .staff-item {
        flex: 1;
        line-height: 2.25rem;
        margin-right: 0.625rem;
        background: url(../../../assets/images/icon8.png) no-repeat 0 0;
        background-size: 100% 100%;
        padding: 0 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.875rem;
        color: #fff;
        .staff {
          font-weight: 600;
          background-image: linear-gradient(to top, #6EE5FF 0%, #ffffff 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      .staff-item:last-child {
        margin: 0;
      }
    }

    .top-statistics {
      width: 26.375rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 1.25rem;
      .statistics-item {
        width: 5.8125rem;
        height: 5rem;
        font-size: 0.875rem;
        color: #fff;
        background: url(../../../assets/images/icon7.png) no-repeat 0 0;
        background-size: 100% auto;
        text-align: center;
        .statistics-num {
          font-family: "CustomNumberFont";
          line-height: 1;
          font-size: 1.5rem;
          margin: 0.625rem 0 0.3125rem;
        }
      }
    }
  }
  .left-center {
    .lane {
      display: flex;
      align-items: center;
      color: #fff;
      margin: 0.9375rem 0.9375rem 1.25rem;

      .lane-item {
        flex: 1;
        margin-right: 0.625rem;
        padding: 0.625rem 0 0.625rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: url(../../../assets/images/icon14.png) no-repeat 0 0;
        background-size: 100% 100%;
        .lane-title {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.8rem;
          margin-bottom: 1.125rem;
          img {
            width: 1.25rem;
            margin-right: 5px;
          }
        }
        .lane-opt {
          margin-bottom: 0.625rem;
          .opt-num {
            font-family: "CustomNumberFont";
            margin-left: 1.25rem;
            font-size: 1.25rem;
            color: #6EE5FF;
            .text-white {
              color: #fff;
            }
          }
        }
      }
    }
  }
  .left-bottom {
  }
}

.table {
  width: 56.25rem;
  height: 10.625rem;
  box-sizing: border-box;
  .table-header {
    width: 100%;
    height: 2.375rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: url(../../../assets/images/icon13.png) no-repeat 0 0;
    background-size: 100% 100%;

    color: #fff;
    font-size: 1rem;
    margin-bottom: 0.375rem;
  }
  .table-th {
    .tr {
      height: 2.375rem;
      display: flex;
      align-items: center;
      color: #75ced1;

      background: url(../../../assets/images/icon18.png) no-repeat 0 0;
      background-size: 100% 100%;
      opacity: 0.7;
      .serial {
        line-height: 2.375rem;
        background: url(../../../assets/images/icon15.png) no-repeat center
          center;
        background-size: 1.5rem 1.5rem;
        font-size: 1rem;
        color: #75ced1;
      }
    }
  }
  .table-th:nth-child(2n) {
    .tr {
      margin-top: 0.5px;
      background: url(../../../assets/images/icon19.png) no-repeat 0 0;
      background-size: 100% 100%;
      color: #fff;
    }
    .serial {
      background: url(../../../assets/images/icon16.png) no-repeat center center;
      background-size: 1.5rem 1.5rem;
      color: #fff;
    }
  }
  .td {
    font-size: 0.875rem;
    text-align: center;
  }
}

.gate-right {
  width: 28.125rem;
  position: fixed;
  right: 2.5rem;
  top: 6.25rem;
  z-index: 1;
  .flex {
    display: flex;
    align-items: center;
    .flex-item {
      flex: 1;
      margin-right: 0.75rem;
    }
    .flex-item:last-child {
      margin-right: 0;
    }
  }
  .right-top {
    .trend-title {
      font-size: 1.125rem;
      color: #98EDFF;
    }
    .fee {
      margin-top: 1rem;
      margin-bottom: 1.25rem;
      .flex-item {
        height: 5.75rem;
        background: url(../../../assets/images/icon17.png) no-repeat 0 0;
        background-size: 100% 100%;
        .fee-top {
          display: flex;
          align-items: center;
          padding: 0.625rem 0.625rem 0.25rem;
          color: #ccefec;
          img {
            width: 1.375rem;
            height: 1.375rem;
            margin-right: 0.625rem;
          }
          .fee-num {
            font-size: 1.5rem;
            font-family: CustomNumberFont;
            margin-top: 0.375rem;
          }
        }
        .fee-bottom {
          display: flex;
          align-items: center;
          color: #ccefec;
          padding: 0 1.25rem;
          font-size: 0.875rem;
          span {
            padding-left: 0.3125rem;
            padding-right: 1rem;
          }
          span.red {
            color: #ff4e4e;
            padding-left: 0.75rem;
            position: relative;
          }
          span.red::before {
            content: "";
            display: block;
            background: url(../../../assets/images/icon25.png) no-repeat 0 0;
            background-size: 100% 100%;
            width: 0.4375rem;
            height: 0.5625rem;
            position: absolute;
            left: 0.25rem;
            top: 50%;
            transform: translateY(-50%);
          }
          span.green {
            color: #98EDFF;
            padding-left: 0.75rem;
            position: relative;
          }
          span.green::before {
            content: "";
            display: block;
            background: url(../../../assets/images/icon24.png) no-repeat 0 0;
            background-size: 100% 100%;
            width: 0.4375rem;
            height: 0.5625rem;
            position: absolute;
            left: 0.25rem;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }
    .trend {
      .flex {
        justify-content: space-between;

        .tab {
          display: flex;
          align-items: center;
          div {
            width: 2.75rem;
            line-height: 1.375rem;
            background: url(../../../assets/images/icon21.png) no-repeat 0 0;
            background-size: 100% 100%;
            color: #fff;
            text-align: center;
            font-size: 0.875rem;
            margin-left: 0.625rem;
          }
          div.active {
            background: url(../../../assets/images/icon22.png) no-repeat 0 0;
            background-size: 100% 100%;
          }
        }
      }
    }
    .over {
      margin-bottom: 0.98rem;
      .flex-item {
        height: 3.75rem;
        background: url(../../../assets/images/icon9.png) no-repeat 0 0;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #ccefec;
        font-size: 0.875rem;
        margin-right: 1.125rem;
        margin-top: 0.625rem;
        .over-num {
          font-size: 1.5rem;
          font-family: CustomNumberFont;
        }
      }
      .flex-item:last-child {
        margin-right: 0;
      }
    }
  }
  .right-center {
    .check {
      width: 28.125rem;
      height: 6.25rem;
      background: url(../../../assets/images/icon28.png) no-repeat 0 0;
      background-size: 100% 100%;
      padding: 1rem 1.25rem;
      margin: 0.3125rem 0 0.5625rem;
      .flex-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #ccefec;
        .check-num {
          font-family: CustomNumberFont;
          font-size: 1.5rem;
          color: #fff;
          // font-weight: bold;
          span {
            font-size: 1rem;
            font-weight: 100;
          }
        }
      }
    }
    .chase {
      width: 28.125rem;
      height: 4.375rem;
      background: url(../../../assets/images/icon29.png) no-repeat 0 0;
      background-size: 100% 100%;
      padding: 1rem 1.25rem;
      margin: 0.3125rem 0 0.5625rem;
      .flex-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #ccefec;
        font-size: 0.875rem;
        .chase-num {
          font-family: CustomNumberFont;
          font-size: 1.5rem;
          color: #fff;
          // font-weight: bold;
          span {
            font-size: 1rem;
            font-weight: 100;
          }
        }
      }
    }
  }
  .right-bottom {
    .limit {
      margin-top: 1.25rem;
      .flex-item {
        height: 9.4rem;
        width: 11.6875rem;
        padding: 1rem 0;
        background: url(../../../assets/images/icon33.png) no-repeat 0 0;
        background-size: 100% 100%;
        font-size: 0.875rem;
        color: #ccefec;
        margin-right: 2.625rem;
        margin-bottom: 1rem;
        position: relative;
        text-align: center;
        .limit-num {
          font-family: CustomNumberFont;
          color: #fff;
          font-size: 1.5rem;
          margin-bottom: 0.8rem;
        }
      }
      .flex-item:nth-child(2n) {
        background: url(../../../assets/images/icon32.png) no-repeat 0 0;
        background-size: 100% 100%;
      }
      .flex-item:last-child {
        margin-right: 0;
        position: relative;
        background: url(../../../assets/images/icon31.png) no-repeat 0 0;
        background-size: 100% 100%;
      }
      .flex-item:first-child::before {
        content: "";
        display: block;
        width: 0.625rem;
        height: 0.3125rem;
        background: url(../../../assets/images/icon30.png) no-repeat 0 0;
        background-size: 100% 100%;
        position: absolute;
        right: -1.5rem;
        top: 4.5rem;
      }
      .flex-item:last-child::before {
        content: "";
        display: block;
        width: 0.625rem;
        height: 0.3125rem;
        background: url(../../../assets/images/icon30.png) no-repeat 0 0;
        background-size: 100% 100%;
        position: absolute;
        left: -1.5rem;
        top: 4.5rem;
      }
    }
  }
}
.gate-footer {
  width: 56.25rem;
  height: 14.375rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 3rem;
  display: flex;
  justify-content: space-between;
}

.footer-item {
  width: 26.875rem;
  .flex-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .tab {
      display: flex;
      align-items: center;
      div {
        width: 2.75rem;
        line-height: 1.375rem;
        background: url(../../../assets/images/icon21.png) no-repeat 0 0;
        background-size: 100% 100%;
        color: #fff;
        text-align: center;
        font-size: 0.875rem;
        margin-left: 0.625rem;
      }
      div.active {
        background: url(../../../assets/images/icon22.png) no-repeat 0 0;
        background-size: 100% 100%;
      }
    }
  }
  .list {
    margin-top: 1rem;
    height: 10.625rem;
    overflow-y: auto;
    .flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 2.625rem;
      height: 2.625rem;
      .list-title {
        width: 17.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #fff;
      }
      .list-date {
        color: #bafeff;
      }
    }
  }
  .light {
    margin-top: 1rem;
    height: 13rem;
    overflow-y: auto;
    .light-item {
      height: 5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.375rem;
      .light-img {
        width: 6.25rem;
        height: 4.125rem;
      }
      .light-title {
        width: 18.8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: #fff;
        margin-bottom: 0.4rem;
        line-height: 1.6;
      }
      .light-date {
        color: #bafeff;
      }
    }
  }
}
.bottom {
  width: 54.6875rem;
  height: 2.0625rem;
  background: url(../../../assets/images/bottom.png) no-repeat 0 0;
  background-size: 100% 100%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.margin-bottom {
  margin-bottom: 0.625rem;
}

::-webkit-scrollbar {
  display: none !important;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
  display: none !important;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  display: none !important;
}

::-webkit-scrollbar-thumb:window-inactive {
  background: transparent !important;
  display: none !important;
}

@media screen and (min-width: 1920px) {
  .body {
    // scale: calc(100% / 1920px);
  }
  // .body {
  // height: 100vh;
  // }
  // .bottom{
  //   position: fixed;
  //   bottom: 0;
  //   z-index: 1;
  // }
}
</style>